import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import FrameSlider from '../FrameSlider';
import styles from './index.module.less';

const Demo = (props) => {
  const { className } = props;

  const [value, setValue] = useState(null);

  return (
    <div className={classnames(styles.root, className)}>
      <FrameSlider
        value={value}
        onValueChanged={(val) => {
          setValue(val);
        }}
      />
    </div>
  );
};

Demo.defaultProps = {
  className: null,
};

Demo.propTypes = {
  className: PropTypes.any,
};

export default Demo;
